<%-- 
    Document   : graphNet
    Created on : 24-ene-2014, 23:14:02
    Author     : Juan
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <%@include file="../disenoWeb/title.html" %>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="../disenoWeb/css/estiloGraficoRed.css">
    </head>

    <body>
        <script src="../disenoWeb/js/d3.v3.min.js"></script>  
        <%
            /*Se obtiene la informacion necesaria para pintar el grafo*/
            String carpeta = (String) session.getAttribute("carpeta");//Organismo seleccionado

            /*Se coloca en session el nombre del fichero para luego recogerlo en 'crearJson'*/
            String red = request.getParameter("tituloP");
            session.setAttribute("red", red);

            /*Se coloca en session 'opcionRedEntrada' para luego recogerlo en 'crearJson'*/
            String opcionRedEntrada = request.getParameter("opcionRedEntrada");
            session.setAttribute("opcionRedEntrada", opcionRedEntrada);
        %>
        <script>
            var organismoBlank = "<%=carpeta%>";
            var width = 1200,
                    height = 610;

            var force = d3.layout.force()
                    .charge(function(d) {
                        return -10 * Math.sqrt(d.count) //Original: -35. Separación entre todos los grupos
                    })
                    .linkDistance(85) //Separación entre los nodos
                    .gravity(0.15)
                    .size([width - 250, height]);

            var svg = d3.select("body").append("svg")
                    .attr("width", width)
                    .attr("height", height);


            d3.json("addJSON.jsp", function(error, graph) {

                var kinds = ["liryka", "epika", "dramat"] //Determinan el color de los nodos en funcion de su valor en el .json

                var kind_max = {}


                for (var i = 0; i < kinds.length; i++) {
                    kind_max[kinds[i]] = d3.max(graph.nodes, function(d) {
                        return d[kinds[i]] / d.count;
                    });
                }
                ;

                var kind_to_color = function(d) {
                    return d3.rgb(
                            255 * d.liryka / d.count / kind_max.liryka,
                            0.9 * 255 * d.epika / d.count / kind_max.epika, // 90% not to make it too bright
                            255 * d.dramat / d.count / kind_max.dramat
                            )
                };

                var main = svg.append("g")
                        .attr("class", "graph");

                force
                        .nodes(graph.nodes)
                        .links(graph.links)
                        .start();

                var link = main.selectAll(".link")
                        .data(graph.links)
                        .enter().append("line")
                        .attr("class", "link")
                        .style("stroke-width", function(d) {
                            return 2 * d.strength;
                        });

                var node = main.selectAll(".node_circle")
                        .data(graph.nodes)
                        .enter().append("circle")
                        .attr("class", "node_circle")
                        .attr("r", function(d) {
                            return 0.5 * Math.sqrt(d.count);
                        })
                        .style("fill", function(d) {
                            return kind_to_color(d).toString();
                        })
                        .on("mouseover", function(d) {
                            mouseover_node(d);
                        })
                        .on("mouseout", function(d) {
                            mouseout_node(d)
                        })
                        .on("dblclick", function(d) {
                            window.open('http://www.genome.jp/dbget-bin/www_bget?' + organismoBlank + ':' + d.name, '_blank');
                            window.focus();
                        }).call(force.drag);
                //.on("dblclick", function(d) {
                //    window.location.href = ('http://www.genome.jp/dbget-bin/www_bget?'+<!%=carpeta%>+':'+d.name+'/')
                //})
                //.call(force.drag);

                var label = main.selectAll(".node_label")
                        .data(graph.nodes)
                        .enter().append("text")
                        .attr("class", "node_label")
                        .attr("dx", function(d) {
                            return 2 + 0.5 * Math.sqrt(d.count);
                        })
                        .attr("dy", ".4em")
                        .attr("font-family", "Verdana")
                        .attr("font-size", 10)
                        .style("fill", "#000000")
                        .text(function(d) {
                            return d.display_en;
                        });

                force.on("tick", function() {
                    link.attr("x1", function(d) {
                        return d.source.x;
                    })
                            .attr("y1", function(d) {
                                return d.source.y;
                            })
                            .attr("x2", function(d) {
                                return d.target.x;
                            })
                            .attr("y2", function(d) {
                                return d.target.y;
                            });

                    // node
                    //   .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
                    node.attr("cx", function(d) {
                        return d.x;
                    })
                            .attr("cy", function(d) {
                                return d.y;
                            });

                    label.attr("x", function(d) {
                        return d.x;
                    })
                            .attr("y", function(d) {
                                return d.y;
                            });
                });

                var mouseover_node = function(z) {

                    var neighbors = {};
                    neighbors[z.index] = true;

                    link.filter(function(d) {
                        if (d.source == z) {
                            neighbors[d.target.index] = true
                            return true
                        } else if (d.target == z) {
                            neighbors[d.source.index] = true
                            return true
                        } else {
                            return false
                        }
                    })
                            .style("stroke-opacity", 1);

                    node.filter(function(d) {
                        return neighbors[d.index]
                    })
                            .style("stroke-width", 3);

                    label.filter(function(d) {
                        return !neighbors[d.index]
                    })
                            .style("fill-opacity", 0.2);

                    label.filter(function(d) {
                        return neighbors[d.index]
                    })
                            .attr("font-size", 16)

                };

                var mouseout_node = function(z) {
                    link
                            .style("stroke-opacity", 0.2);

                    node
                            .style("stroke-width", 1)

                    label
                            .attr("font-size", 10)
                            .style("fill-opacity", 1)

                };

            });

        </script>        

    </body>
</html>